import { Meta, Status, Props, Story } from "../../../../.storybook/components";
import * as Stories from "./NotificationModal.stories";

<Meta of={Stories} />

# NotificationModal

<Status variant="stable" />

The notification modal component communicates critical information while blocking everything else on the page, and needs the user's attention or action to proceed. It is built atop the [Modal](Components/Modal/Docs) component.

<Story of={Stories.Base} />
<Props />

## When to use it

- For information that needs a user's immediate attention.
- To request confirmation before performing a destructive action.

## How to use it

### Inline (recommended)

Place your NotificationModal directly in your JSX:

```jsx
import { NotificationModal, Button } from "@sumup-oss/circuit-ui";
import { useState } from "react";

const [open, setOpen] = useState(false);

return (
  <>
    <Button onClick={() => setOpen(true)}>Open dialog</Button>
    <NotificationModal
      open={open}
      closeButtonLabel="Close"
      onClose={() => setOpen(false)}
      headline="It's time to update your browser"
      actions={{
        primary: {
          children: "Update now",
          onClick: update(),
        },
        secondary: {
          children: "Not now",
          onClick: () => setOpen(false),
        },
      }}
    ></NotificationModal>
  </>
);
```

### with the `useModal` hook

First, wrap your application in the `ModalProvider`:

```tsx
import { ModalProvider } from "@sumup-oss/circuit-ui";

export default function App() {
  return <ModalProvider>{/* Your content here... */}</ModalProvider>;
}
```

Then, use the `useNotificationModal` hook to open a NotificationModal from a component:

```tsx
import { useNotificationModal, Heading, Button } from "@sumup-oss/circuit-ui";

export function SayHello({ name }) {
  const { setModal, removeModal } = useNotificationModal();

  const handleClick = () => {
    setModal({
      image: {
        src: "/images/illustration-update.svg",
        alt: "",
      },
      headline: "It's time to update your browser",
      body: "You'll soon need a more up-to-date browser to continue using SumUp.",
      actions: {
        primary: {
          children: "Update now",
          onClick: update(),
        },
        secondary: {
          children: "Not now",
          onClick: removeModal(),
        },
      },
      closeButtonLabel: "Close",
    });
  };

  return <Button onClick={handleClick}>Say hello</Button>;
}
```

## Usage guidelines

- Use a concise headline to communicate the message.
- If needed, an optional body copy and image can be included.
- The maximum width of the image is 232px, and the default height is set to 120px.
- The positioning of the buttons within a button group follows the guidelines of the [ButtonGroup](Components/Button/ButtonGroup) component.
